<template>
    <div class="container">
        <div ref="lineChartRef" class="chart"></div>
        <div ref="pieChartRef" class="chart"></div>
    </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import { ref, onMounted, onBeforeUnmount } from "vue";

const lineChartRef = ref<HTMLDivElement | null>(null);
const pieChartRef = ref<HTMLDivElement | null>(null);

let lineChart: echarts.ECharts | null = null;
let pieChart: echarts.ECharts | null = null;

const datasetSource = [
    ["product", "2012", "2013", "2014", "2015", "2016", "2017"],
    ["Milk Tea", 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
    ["Matcha Latte", 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
    ["Cheese Cocoa", 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
    ["Walnut Brownie", 25.2, 37.1, 41.2, 18, 33.9, 49.1],
];

// 初始化折线图配置
const lineOption: echarts.EChartsOption = {
    legend: {},
    tooltip: { trigger: "axis", showContent: false },
    dataset: { source: datasetSource },
    xAxis: { type: "category" },
    yAxis: { gridIndex: 0 },
    grid: { top: "55%" },
    series: [
        { type: "line", smooth: true, seriesLayoutBy: "row", emphasis: { focus: "series" } },
        { type: "line", smooth: true, seriesLayoutBy: "row", emphasis: { focus: "series" } },
        { type: "line", smooth: true, seriesLayoutBy: "row", emphasis: { focus: "series" } },
        { type: "line", smooth: true, seriesLayoutBy: "row", emphasis: { focus: "series" } },
    ],
};

// 初始化饼图数据函数，传入维度索引
function getPieDataByDimension(dimension: number) {
    const pieData = [];
    for (let i = 1; i < datasetSource.length; i++) {
        pieData.push({
            name: datasetSource[i][0],
            value: datasetSource[i][dimension],
        });
    }
    return pieData;
}

onMounted(() => {
    if (!lineChartRef.value || !pieChartRef.value) return;

    lineChart = echarts.init(lineChartRef.value);
    pieChart = echarts.init(pieChartRef.value);

    lineChart.setOption(lineOption);

    // 默认显示2012年的饼图数据，维度索引1对应2012
    pieChart.setOption({
        series: [
            {
                type: "pie",
                radius: "50%",
                center: ["50%", "50%"],
                label: {
                    formatter: "{b}: {c} ({d}%)",
                },
                data: getPieDataByDimension(1),
            },
        ],
    });

    // 关联两个图表，实现联动
    // lineChart.group = "group1";
    // pieChart.group = "group1";
    // echarts.connect("group1");

    // 折线图鼠标悬浮时，更新饼图数据
    lineChart.on("updateAxisPointer", (event: any) => {
    // lineChart.on("globalout", (event: any) => {
        const xAxisInfo = event.axesInfo?.[0];
        if (xAxisInfo) {
            console.log(111);
            
            const dimension = xAxisInfo.value + 1;
            pieChart?.setOption({
                series: [
                    {
                        id: "pie",
                        type: "pie", // 必须写
                        data: getPieDataByDimension(dimension),
                        label: {
                            formatter: "{b}: {c} ({d}%)",
                        },
                    },
                ],
            });
        }
    });
});

onBeforeUnmount(() => {
    lineChart?.dispose();
    pieChart?.dispose();
});
</script>

<style scoped>
.container {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 20px;
}
.chart {
    width: 500px;
    height: 400px;
}
</style>
